<template>
    <div class="stu">
        <el-button type="primary" style="margin:25px;" @click="addStu">新增学生信息</el-button>
        <div class="content" >
            <el-main>
                <el-table
                    border
                    :fit="true"
                    :data="tableData.slice((currentPage - 1) * pageSize,currentPage * pageSize)"
                >
                    <el-table-column
                        prop="_id"
                        label="序号"
                    ></el-table-column>
                    <el-table-column
                        prop="name"
                        label="姓名"
                    ></el-table-column>
                    <el-table-column
                        prop="age"
                        label="年龄"
                    ></el-table-column>
                    <el-table-column
                        prop="sex"
                        label="性别"
                    ></el-table-column>
                    <el-table-column
                        prop="address"
                        label="地址"
                    ></el-table-column>
                    <el-table-column
                        prop="tel"
                        label="电话"
                    ></el-table-column>
                    <el-table-column
                        prop="identity"
                        label="身份证"
                    ></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                type="primary"
                                @click="updStu(scope.row)"
                            >修改</el-button>
                            <el-button
                                size="mini"
                                type="danger"
                                @click="delStu(scope.row)"
                            >删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <pageNation
                    :total="tableData.length"
                    :page-size="pageSize"
                    @pageChange="pageChange"
                    :page_index="currentPage"
                />
            </el-main>
        </div>
        <StuDialog
            :dialog="dialog"
            :StuForm="StuForm"
            @saveStu="getStu($event)"
        />
    </div>
</template>

<script>
import pageNation from "../../components/pagenation/pageNation";
import StuDialog from "../../components/dialog/StuDialog"
export default {
    name: "Shop",
    components: {pageNation,StuDialog},
    data() {
        return {
            pageSize: 10,
            currentPage: 1,
            tableData: [],
            StuForm:{
                _id:"",
                name:"",
                age:"",
                sex:"",
                address:"",
                tel:"",
                identity:""
            },
            dialog: {
                show: false,
                title: "",
                option: "edit", //默认为编辑操作
            }
        };
    },
    mounted() {
       this.getStuMsg();
    },
    methods: {
        getStuMsg(){
            this.$http.get("/api/stu/findStuAll").then(res=>{
                if(res.data.code===200){
                    this.tableData=res.data.result;
                }else{
                    this.$message.error("没有对应数据");
                }
            })
        },
        //分页
        pageChange(item) {
            this.currentPage = item.page_index;
            this.pageSize = item.page_limit;
        },
        addStu(){
            this.dialog={
                show: true,
                title: "添加学生信息",
                option: "add", //默认为编辑操作
            };
            this.StuForm._id="";
            this.StuForm.name="";
            this.StuForm.age="";
            this.StuForm.sex="";
            this.StuForm.address="";
            this.StuForm.tel="";
            this.StuForm.identity="";
        },
        updStu(row){
             this.dialog={
                show: true,
                title: "编辑学生信息",
                option: "edit", //默认为编辑操作
            };
            this.StuForm._id=row._id;
            this.StuForm.name=row.name;
            this.StuForm.age=row.age;
            this.StuForm.sex=row.sex;
            this.StuForm.address=row.address;
            this.StuForm.tel=row.tel;
            this.StuForm.identity=row.identity;
        },
        delStu(row){
             this.$confirm("确定禁用邮件吗?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }).then(() => {
                this.$http.post(`/api/stu/delStu/${row._id}`).then(res=>{
                    if(res.data.code===200){
                        this.$message.success("删除成功");
                        this.getStuMsg();
                    }else{
                        this.$message({type:"waning",message:"删除失败"});
                    }
                })
            })
            .catch(() => {
            return;
            });
        },
        getStu(stu){
            const url=this.dialog.option == "add" ? "addStu" : `updStu/${stu._id}`;
            this.$http.post(`/api/stu/${url}`,{
                name:stu.name,
                age:stu.age,
                sex:stu.sex,
                address:stu.address,
                tel:stu.tel,
                identity:stu.identity
            }).then(res=>{
                if(res.data.code===200){
                    this.$message.success("操作成功");
                    this.getStuMsg();
                }else{
                    this.$message({type:"warning",message:"操作失败"})
                }
            })
        }
    }
}
</script>

<style scoped lang="less">
    .stu{
        width:100%;
        height:91vh;
        background:#fff;
    }
</style>